<template>
  <div class="tab-container">
    <h1>商户下单支付到账核对情况</h1>
    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
      <el-tab-pane label="每日商户下单支付到账核对情况" name="first">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="订单编号" width="100"/>
          <el-table-column prop="date" label="下单日期" width="100"/>
          <el-table-column prop="name" label="下单商户" width="100"/>
          <el-table-column prop="name" label="下单金额" width="100"/>
          <el-table-column prop="address" label="支付日期" width="100"/>
          <el-table-column prop="name" label="支付金额" width="100"/>
          <el-table-column prop="name" label="支付状态" width="100"/>
          <el-table-column prop="address" label="到账日期" width="100"/>
          <el-table-column prop="name" label="到账金额" width="100"/>
          <el-table-column prop="name" label="到账状态" width="100"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="每周商户下单支付到账核对情况" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="每月商户下单支付到账核对情况" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="每季商户下单支付到账核对情况" name="fourth">定时任务补偿</el-tab-pane>
      <el-tab-pane label="每年商户下单支付到账核对情况" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: 'Tab2',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      activeName: 'first'
    }
  },
  methods: {
  }
}
</script>

<style scoped>
  .tab-container{
    margin: 30px;
  }
</style>
